<!--
  功能：功能描述
  作者：xxx
  时间：2023年02月20日 18:55:34
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <div id="school">
    <div class="title"><i class="el-icon-coin"></i>意见反馈</div>
    <div class="app-container">
      <div class="filter-container">
        <el-select
          v-model="schoolId"
          placeholder="请选择所属院校"
          @change="selectChange()"
        >
          <el-option
            v-for="it in schoolList"
            :key="it.id"
            :label="it.name"
            :value="it.id"
          ></el-option>
        </el-select>
        <!-- <el-button
          class="filter-item"
          type="primary"
          size="small"
          icon="el-icon-circle-plus"
          @click="$router.push(add_url)"
          >添加</el-button
        > -->
      </div>
      <el-table
        :data="tableData"
        v-loading="loadList"
        element-loading-text="拼命加载中..."
        border
      >
        <el-table-column prop="userId" label="用户ID"></el-table-column>
        <el-table-column prop="msg" label="建议内容"></el-table-column>
        <el-table-column prop="schoolName" label="院校"></el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>

        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button size="mini" @click="dialogShow(scope.row)"
              >修改备注</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div v-show="!loadList" class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 50, 100, 200]"
          :page-size="pageSize"
          layout="total,prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <el-dialog title="修改备注" :visible.sync="dialogVisible" width="30%">
      <el-input
        type="textarea"
        :autosize="{ minRows: 6, maxRows: 12 }"
        placeholder="请输入备注"
        v-model.trim="item.remark"
      ></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="edit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getList, del, getSchoolList,edit } from "./api/index";
import {filterSchool} from '../../utils/common';
export default {
  data() {
    return {
      item: {},
      dialogVisible: false,
      currentPage: 1,
      total: 0,
      pager: 1,
      pageSize: 10,
      schoolList: [],
      schoolId: window.sessionStorage.getItem("schoolId")
        ? window.sessionStorage.getItem("schoolId") * 1
        : "",
      loadList: true,
      tableData: [],
      // getListFunc: Service.getList,
      // delItemFunc: Service.delItem,
      add_url: "/banner/add",
      edit_url: (id) => {
        return `/banner/${id}/edit`;
      },
    };
  },
  computed: {},
  created() {
    this.refresh_data();
    this.selectChange();
  },
  methods: {
    findSchool(id) {
      const obj = this.schoolList.find((i) => i.id === id);
      return obj ? obj : { name: "" };
    },
    // 查询
    async selectChange(currentPage) {
      if (!currentPage) currentPage = 1;
      if (!this.schoolId) return;
      window.sessionStorage.setItem("schoolId", this.schoolId);
      this.loadList = true;
      const res = await getList(this.schoolId, this.pageSize, currentPage);
      if (res.code === 1) {
        this.tableData = res.data.records;
        this.total = res.data.total;
        this.currentPage = res.data.current;
      }
      this.loadList = false;
    },
    // 获取院校列表
    refresh_data() {
      getSchoolList()
        .then((data) => {
          if (data.code === 1) {
            this.schoolList = filterSchool(data.data);
          } else {
            this.$message.error(data.description);
          }
          this.loadList = false;
        })
        .catch((err) => {
          console.log(err);
          this.loadList = false;
        });
    },
  
    handleSizeChange(val) {
      console.log(val, "111");
      this.pageSize = val;
      this.selectChange(1, this.params);
    },
    handleCurrentChange(val) {
      console.log(val, "00000");
      this.selectChange(val, this.params);
    },
    dialogShow(item) {
      this.item = item;
      this.dialogVisible = !this.dialogVisible;
    },
    // 修改备注
    async edit() {
      this.loadList = !this.loadList;
      const res = await edit(this.item.id, this.item.remark);
      if (res.code === 1) {
        this.selectChange(this.currentPage);
        this.dialogVisible = !this.dialogVisible;
      } else {
        this.loadList = !this.loadList;
        this.$message.error(res.msg);
      }
    },
    async del(item) {
      this.$confirm("确认删除该条数据？", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        this.loadList = true;
        const res = await del(item.id);
        if (res.code === 1) {
          this.selectChange(this.currentPage);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
</style>
